<!-- 获取公路布控点列表 -->
<template>
  <div class="org_view">
    <h3 class="h3Title">公路/路段/布控点选择</h3>
    <el-cascader
      placeholder="搜索公路"
      :show-all-levels="false"
      change-on-select
      v-model="selectedOrg"
      clearable
      :options="options"
      @change="changeDept"
      filterable
    ></el-cascader>


    <div style="width: 100%;height: 45vh;overflow-y: auto;">
      <el-tree
        node-key="value"
        ref="roadTree"
        :highlight-current="true"
        :default-expanded-keys="openDeptList"
        @node-click="handleNodeClick"
        class="a_t-tree"
        :data="options"
        :props="defaultProps">
        <template slot-scope="{ node }">
          <el-tooltip effect="dark" :content="node.label" placement="right" popper-class="atooltip">
            <div>{{ node.label }}</div>
          </el-tooltip>
        </template>
      </el-tree>
    </div>
    <el-divider></el-divider>

  </div>
</template>

<script>
  import {getArrangementList} from '@/services/model/road-control'
  import {getOrganizationTree} from "@/services/model/user";
  import {
    getLocalStorageItem,
    setLocalStorageItem,
  } from "@/utils/storage-helper";
  import {ORGANIZATION_TREE} from "@/utils/constant";

  export default {

    computed: {
      deptTree: {
        get() {
          return this.value;
        },
        set() {
          this.$emit("input", this.dept);
        },
      },
    },
    methods: {
      //选项处理，tree展开项
      findDeptName(list, index) {
        list.map((x) => {
          if (x.value === this.selectedOrg[index]) {
            let item = {
              //包含自己及之前的组织id
              deptTreeIdList: this.selectedOrg.slice(0, index + 1),
              deptName: x.label,
            };
            this.breadList.push(item);
            if (!x.children) {
              return;
            }
            index++;
            this.findDeptName(x.children, index);
          }
        });
      },

      handleNodeClick(data) {
        // debugger
        this.selectedOrg = data.roadTreeId.split("-") || [];
        this.changeDept();
      },

      changeBread(deptTreeIdList) {
        this.selectedOrg = deptTreeIdList || [];
      },
      //搜索组织架构
      changeDept() {
        this.breadList = [];
        this.findDeptName(this.options, 0);
        this.openDeptList = this.selectedOrg.slice(0, this.selectedOrg.length);
        this.selectDept = this.selectedOrg[this.selectedOrg.length - 1];
        //刷新选中项
        this.$nextTick(function () {
          this.$refs.roadTree.setCurrentKey(this.selectDept);
        });
        //回调父组件，传选择的deptTreeId 和 名称(展示面包屑)
        let roadTreeId = this.selectedOrg.join("-");
        this.dept.breadList = this.breadList;
        this.dept.roadTreeId = roadTreeId;
        this.$emit("input", this.dept);
        this.$emit("change");
      },
      //获取公路布控点
      async getOrganizationTree(val) {
          let res = await getArrangementList({roadTreeId:val});
        this.options = res.data;
        // 初始展开第一个组织
        this.$nextTick(function () {
          this.openDeptList = [this.options[0].value];
          this.$refs.roadTree.setCurrentKey(this.options[0].value);
          let item = {
            //包含自己及之前的组织id
            deptTreeIdList: this.openDeptList,
            deptName: this.options[0].label,
          };
          // this.breadList.push(item);
          // this.dept.breadList = this.breadList;
          // this.dept.deptTreeId = this.options[0].value;
          // this.$emit("input", this.dept);
          // this.$emit("change");
        });
      },
    },
    data() {
      return {
        options: [], //选项
        breadList: [], //选中的面包屑
        openDeptList: [],
        selectDept: "", //选中的单个组织id
        selectedOrg: [], //选中的组织treeid
        dept: {},
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },
    mounted() {
      this.getOrganizationTree();
    },
  };
</script>

<style lang="less">
  .org_view {
    background-color: white;
    height: 50vh;
    position: relative;
    overflow: hidden;
    .el-cascader {
      width: 100%;
      padding: 10px;

      .el-input__inner {
        height: 35px;
        border: 1px solid #7c7c7c;
      }
    }

    .left_scroll_tree {
      width: 100%;
      height: calc(100vh - 93px);

      &.layout_scroll_tag {
        height: calc(100vh - 93px);
      }

      /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;

        .el-scrollbar__view {
          height: 100%;
        }
      }
    }

    .a_t-tree {
      padding: 10px;

      .el-tree-node__content {
        height: 36px;
        margin-bottom: 2px;
        color: red !important;
        // overflow: auto;
      }

      .el-tree-node__content:hover {
        background-color: #a7a7a7 !important;
        color: white;
        border-radius: 5px;
        width: 100%;
        background: linear-gradient(to right,
        rgba(25, 144, 254, 1),
        rgba(25, 144, 254, 0.8),
        rgba(25, 144, 254, 0.5),
        rgba(25, 144, 254, 0.3),) !important;
        color: red !important;

        .el-tooltip {
          color: white !important;
          font-size: 120%;
          font-weight: 600;

        }
      }

      &.el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content {
        border-radius: 5px;
        /*background-color: #1990FE !important;*/
        color: #ffffff;
      }

      .left_tree-node {
        height: calc(100vh - 83px);
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 20px;

        .wrap_label {
          height: calc(100vh - 83px);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .el-tree-node__content::-webkit-scrollbar {
        width: 4px;
        height: 2px;
      }

      /*正常情况下滑块的样式*/

      .el-tree-node__content::-webkit-scrollbar-thumb {
        width: 22px;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
      }

      /*鼠标悬浮在该类指向的控件上时滑块的样式*/

      .el-tree-node__content:hover::-webkit-scrollbar-thumb {
        width: 2px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
      }

      /*鼠标悬浮在滑块上时滑块的样式*/

      .el-tree-node__content::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
      }

      /*正常时候的主干部分*/

      .el-tree-node__content::-webkit-scrollbar-track {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: white;
      }

      /*鼠标悬浮在滚动条上的主干部分*/

      .el-tree-node__content::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
        background-color: rgba(0, 0, 0, 0.01);
      }
    }
  }
</style>

<style lang="less" scoped>
  // 修改Tooltip样式
  .atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
    border-right-color: white;
  }

  .atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
    border-right-color: white;

  }

  .atooltip {
    background: white !important;
    color: black !important;
    font-size: 110%;
    box-shadow: 2px 2px 8px black;
    // font-weight: 600;
  }

  .el-tooltip {
    padding: 10px 0px !important;
    width: 200% !important;

    /*height: 20px !important;*/
    // background: red !important;
  }

  .h3Title {
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #1990FE, rgba(25, 144, 254, 0.5), rgba(25, 144, 254, 0.2));
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600
  }
</style>
